<!--
 * @Descripttion: 账单管理-反结账记录
-->
<template>
  <div>
    <div class="handover-content-wrap">
      <!-- 左边盒子 -->
      <div class="left-box" :class="{ fullWidth: currentOrderId ? false : true }">
        <div class="left-box-title">反结账记录</div>
        <!-- 头部搜索栏 -->
        <div class="search-box-wrap">
          <!-- 查询时间 -->
          <div class="betweenTime-box">
            <el-date-picker
              v-model="searchParam.betweenTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="onSearch"
            >
            </el-date-picker>
          </div>

          <!-- 输入框 -->
          <div class="search-input-wrap">
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                v-model.trim="searchParam.search"
                type="text"
                placeholder="搜索"
                @input="onSearch"
              />
            </div>
          </div>
        </div>

        <!-- 营业账单列表相关组件 -->
        <div
          class="table-wrap"
          :class="{ fullWidth: currentOrderId ? false : true }"
          v-loading="tableLoading"
          element-loading-text="加载中..."
        >
          <CancelClosingTableList @singleElection="singleElection" :table-data="tableData" />
        </div>
        <!-- 表格数据总数 -->
        <div class="table-total">
          <span>共{{ pageListTotal }}条</span>
          <div>
            <Pagination
              v-show="pageListTotal > 0"
              :total="pageListTotal"
              v-model:page="searchParam.page"
              v-model:limit="searchParam.limit"
              @pagination="getDeskOrderCancelList"
              :pageSizes="[15, 30, 45, 100]"
            />
          </div>
        </div>

        <!-- 表格数据汇总&&按钮组 -->
        <div class="data-summary-box">
          <span class="summary-text"> </span>

          <div class="sumary-btn-group">
            <span class="cancel" @click="handleCancel">返回</span>
          </div>
        </div>
      </div>
      <!-- 右边盒子 -->
      <div class="right-box" v-show="showRightPanel">
        <CancelClosingCard :selectedOrderId="currentOrderId" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import CancelClosingCard from './components/CancelClosingCard/Index.vue'
import CancelClosingTableList from './components/CancelClosingTableList/Index.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { deskOrderCancelList } from '@/api/statistics'
import { dealAssignDataFunction, debounce } from '@/utils/toolsValidate'

// 查询参数
const searchParam = ref({
  page: 1,
  limit: 15,
  betweenTime: null,
  search: ''
})

// 表格数据总数
const pageListTotal = ref(0)

// 表格数据
const tableData = ref<any[]>([])

// 当前选中的订单id
const currentOrderId = ref<string | null>(null)
// 控制右侧面板显示状态
const showRightPanel = ref(false)
const tableLoading = ref(false)

// 搜索操作
const onSearch = debounce(() => {
  searchParam.value.page = 1
  getDeskOrderCancelList()
}, 500)

// 获取反结账记录列表
const getDeskOrderCancelList = async () => {
  try {
    tableLoading.value = true
    const res = await deskOrderCancelList(searchParam.value)
    if (res.status === 200) {
      tableData.value = dealAssignDataFunction([], res?.data?.list?.data)
      pageListTotal.value = dealAssignDataFunction(0, res?.data?.list?.total)
    }
  } catch (error) {
    console.error('获取反结账记录失败:', error)
  } finally {
    tableLoading.value = false
  }
}

// 单选获取订单id
const singleElection = (row: any) => {
  currentOrderId.value = String(row.order_id)
  // 第一次点击时显示右侧面板，之后不再隐藏
  if (!showRightPanel.value) {
    showRightPanel.value = true
  }
  console.log('currentOrderId=========', currentOrderId.value)
}

// 点击返回
const handleCancel = () => {
  history.go(-1)
}

// 初始化获取数据
getDeskOrderCancelList()
</script>

<style scoped lang="scss">
::v-deep {
  .el-input__inner {
    border-radius: 12px;
  }
}

.fullWidth {
  width: 1600px !important;
  transition: all 1s !important;
}

.handover-content-wrap {
  display: flex;
  align-items: flex-start;

  .left-box {
    box-sizing: border-box;
    width: 1284px;
    min-height: 986px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    transition: all 1s !important;

    .left-box-title {
      width: 100%;
      overflow: hidden;
      height: 88px;
      background: #f4f4f4;
      border-radius: 20px 20px 0px 0px;
      font-size: 20px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .search-box-wrap {
      padding-left: 30px;
      margin-top: 20px;
      padding-right: 30px;
      width: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;

      .betweenTime-box {
        .betweenTime-text {
          font-size: 16px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          color: #333333;
          margin-left: 20px;
          margin: 20px;
        }
      }

      .payMethod-box {
        display: flex;
        align-items: center;

        .payMethod-text {
          font-size: 16px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          text-align: left;
          color: #333333;
          margin-right: 13px;
        }
      }

      .search-input-wrap {
        display: flex;
        justify-content: flex-end;

        .search-input-box {
          width: 280px;
          height: 40px;
          border: 1px solid #d2d2d2;
          border-radius: 25px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding-left: 20px;

          .search-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
          }

          .input {
            border: none;
            outline: none;
            width: 200px;
            font-size: 16px;
            font-family:
              PingFang SC,
              PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333;
            margin-left: 10px;
          }

          > .input::-webkit-input-placeholder {
            font-size: 14px;
            line-height: 40px;
          }
        }
      }
    }

    .search-btn-group {
      margin-top: 20px;
      display: flex;
      padding-left: 36px;

      .active {
        border: 1px solid #7c0a03 !important;
      }

      .all {
        margin-right: 24px;
        width: 116px;
        height: 40px;
        background: #ffffff;
        border-radius: 12px;
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        border: 1px solid #d2d2d2;
        color: #7c0a03;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .closed {
        cursor: pointer;
        margin-right: 24px;
        border-radius: 12px;
        width: 116px;
        height: 40px;
        background: #ffffff;
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #7c0a03;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #d2d2d2;
      }

      .unclosed {
        border-radius: 12px;
        border: 1px solid #d2d2d2;
        width: 116px;
        height: 40px;
        background: #ffffff;
        font-size: 16px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #7c0a03;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .table-wrap {
      width: 1284px;
      box-sizing: border-box;
      transition: all 1s;
      padding: 20px 30px 0 30px;
    }

    .table-total {
      font-size: 14px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      padding: 0 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30px;
      width: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }

    .data-summary-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      padding-right: 30px;
      padding-bottom: 20px;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;

      .summary-text {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #30314a;
      }

      .sumary-btn-group {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .print {
          width: 210px;
          height: 52px;
          background: #ffffff;
          border: 1px solid #333333;
          border-radius: 12px;
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          color: #333333;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        .cancel {
          width: 120px;
          height: 52px;
          background: #ffffff;
          border: 1px solid #333333;
          border-radius: 12px;
          font-size: 18px;
          font-family:
            PingFang SC,
            PingFang SC-Regular;
          font-weight: 400;
          color: #333333;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
      }
    }
  }

  .right-box {
    transition: all 1s;
    margin-left: 30px;
  }
}
</style>
